<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">

      <div class="normal-box-bd">

        <div class="normal-list-page-mod">
          <Table border
                 :loading="list.loading"
                 :columns="list.columns"
                 :data="list.tableData">

          </Table>
        </div>
      </div>
    </div>
      <Modal v-model="modal.bigPicVisible" width="600px">
          <div style="text-align:center;max-width:600px;height:600px;overflow:hidden">
               <img :src="modal.bigPicUrl" style=" width:auto;height:100%" />-
          </div>

      <div slot="footer"/>
    </Modal>
  </div>
</template>
<script>
import submenu from './level2.vue'
import { Message } from 'view-design'

export default {
  props: {
    row: Object
  },
  data () {
    return {
      url: '/api/voCheck/list',
      thead: ['序号', '项目', '检查内容', '评分标准', '分值'],
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          {
            title: '考核内容',
            key: 'name',
            align: 'left',
            minWidth: 250
          },
          {
            title: '考核分数',
            key: 'score',
            align: 'center',
            minWidth: 80
          },
          {
            title: '用户得分',
            key: 'userScore',
            align: 'center',
            minWidth: 80
          },
          {
            title: '图片',
            key: 'imgUrl',
            align: 'center',
            width: 120,
            render: (h, p) => {
              let a = p.row.imgUrl
              if (a.length) {
                return h('img',
                  {
                    attrs: { src: a },
                    style: { width: '100%', height: '80px' },
                    on: { click: () => { this.showBigPic(a) } }
                  })
              } else {
                return h('p'
                )
              }
            }
          },
          {
            title: '备注',
            key: 'remark',
            align: 'center',
            minWidth: 100
          }
        ]
      },
      modal: {
        bigPicVisible: false,
        bigPicUrl: '',
        addGroup: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建一级考核标准',
          formData: {}
        },
        addSpec: {
          isShow: false,
          loading: true,
          type: 'create', // create 新建，update 修改
          title: '新建二级考核标准',
          formData: {}
        }
      }

    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 获取列表
    async getTableData () {
    //   console.log(this.list)
      if (this.row.threeScoreDtos) {
        this.list.tableData = this.row.threeScoreDtos
      } else {
        this.list.tableData = []
      }
    },
    showCreateModal () {
      this.modal.addGroup.title = '添加二级考核标准'
      this.modal.addGroup.type = 'create'
      this.modal.addGroup.formData = {}
      this.modal.addGroup.formData.pid = 0
      this.modal.addGroup.isShow = true
    },
    showUpdateModal (row) {
      this.modal.addGroup.title = '修改二级考核标准'
      this.modal.addGroup.type = 'update'
      this.modal.addGroup.formData = row
      this.modal.addGroup.isShow = true
    },
    showCreateSpec (row) {
      this.modal.addSpec.title = '添加评分标准'
      this.modal.addSpec.type = 'create'
      this.modal.addSpec.formData = {}
      this.modal.addSpec.formData.pid = row.id
      this.modal.addSpec.isShow = true
    },
    showBigPic (item) {
      this.modal.bigPicVisible = true
      this.modal.bigPicUrl = item
    },
    // 新建&修改一级标准
    postGroup () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          if (!that.modal.addGroup.formData.id) { // 新建
            that.modal.addGroup.formData.pid = that.row.id
            CheckApi.add(that.modal.addGroup.formData)
              .then(res => {
                that.modal.addGroup.isShow = false
                that.modal.addGroup.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          } else { // 修改
            CheckApi.update(
              that.modal.addGroup.formData
            )
              .then(res => {
                that.modal.addGroup.isShow = false
                that.modal.addGroup.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          }
        } else {
          that.modal.addGroup.loading = false
          that.$nextTick(() => {
            that.modal.addGroup.loading = true
          })
        }
      })
    },
    // 新建二级
    postSpec () {
      let that = this
      console.log('==formData==', this.modal.addSpec.formData)
      CheckApi.add(that.modal.addSpec.formData)
        .then((res) => {
          that.modal.addSpec.isShow = false
          that.modal.addSpec.loading = false
          if (!res.code) {
            that.getTableData()
            that.$Notice.success({
              title: '保存成功!'
            })
          } else {
            that.$Notice.error({
              title: res.message
            })
          }
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 删除规格组
    delData (id) {
      let that = this
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          id.toString() +
          '</strong> 的考核标准吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          CheckApi.del({
            ids: [id]
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              that.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  > div {
    width: 100%;
    tr {
      width: 100%;
      vertical-align: middle;
      th {
        font-size: 1.5em;
        background: #f8f8f9;
      }
      td,
      th {
        box-sizing: border-box;
        padding: 5px 0;
        border: 1px solid #e8eaec;
      }
      .c0 {
        font-size: 1.5em;
        width: 4vw;
        background: #fff;
      }
      .c1 {
        font-size: 1.5em;
        width: 12vw !important;
        background: #fdfdfd;
      }
      .c2 {
        width: 20vw;
        font-size: 1.2em;
      }
      .c3 {
        width: 35vw;
        font-size: 1.2em;
      }
      .c4 {
        width: 15vw;
        font-size: 1.5em;
      }
    }
    tr:hover {
      background: #efefef !important;
      transition: all ease 0.5s;
    }
  }
}
</style>
